<template>
    <div>
        <!-- 网关 -->
        <TopNav :obj="obj"></TopNav>
        <GatewayForm :total="total" :getData="getData"></GatewayForm>
        <GatewayTable :tableData="tableData" :pageObj="pageObj" :total="total" :getData="getData"></GatewayTable>
    </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue';
import GatewayTable from './components/GatewayTable.vue';
import GatewayForm from './components/GatewayForm.vue';
import { $GatewayData } from "@/api"
import { defineComponent, reactive, onMounted, toRefs } from 'vue'

export default defineComponent({
    name: 'GatewayView',
    components: { TopNav, GatewayTable, GatewayForm },
    setup() {
        const Data = reactive({
            obj: {
                path: '设备',
                title: '网关列表',
                msg: '展示EUI、名称、状态、等设备信息，可以根据EUI、状态、和绑定时间等条件筛选具体网关。'
            },
            tableData: [],
            pageObj: {
                currPage: 1,
                pageSize: 5,
                eui: '',
                online: null,
                agreement: '',
                date: null
            },
            total: 1
        })

        /* ===================== */
        onMounted(() => {
            getData()
        })
        /* ============方法========= */
        function getData(obj) {
            if (obj) {
                Data.pageObj = { ...obj }
            }

            $GatewayData(Data.pageObj).then(res => {
                Data.tableData = res.data.data;
                Data.total = res.data.total;
            })
        }
        return { ...toRefs(Data), getData }
    }
});
</script>

<style lang="less" scoped></style>